<template>
<!-- 页面头部 -->
<HomePageHead></HomePageHead>
<!-- 导航栏 -->
<HomePageNavigation></HomePageNavigation>
<!-- 列表页广告一 -->
<HomeTopTen :imgurl="adImg1" v-if="adImg1"></HomeTopTen>
<!-- 资讯列表 -->
<div class="newsDetail">
<div class="inner">
<div class="innerLeft">
<!-- 面包屑导航 -->
<div class="breadcrumb">
<div class="inner">
<span class="location">当前位置:</span>
<el-breadcrumb :separator-icon="ArrowRight">
<el-breadcrumb-item>
<NuxtLink to="/">首页</NuxtLink>
</el-breadcrumb-item>
<el-breadcrumb-item v-if="parent_children_count > 0">
<NuxtLink :to="`/${parent_pinyin}/index.html`"> {{ parent_name }}</NuxtLink>
</el-breadcrumb-item>
<el-breadcrumb-item v-else">
<NuxtLink :to="`/${parent_pinyin}/list-1.html`"> {{ parent_name }}</NuxtLink>
</el-breadcrumb-item>
<el-breadcrumb-item>{{ routeNewsTtitle }}</el-breadcrumb-item>
</el-breadcrumb>
</div>
</div>
<div class="LeftTop">
<h1>{{ newsDetail.title }}</h1>
<p>
来源: <span>{{ newsDetail.copyfrom }}</span>
作者: <span>{{ newsDetail.author }}</span>
发布时间: <span>{{ time }}</span>
</p>
</div>
<div
class="leftBottom"
v-html="newsDetail.content"
v-if="newsDetail.content"
@click="openPreview">
</div>
<div v-if="previewVisible" class="preview-modal" @click="closePreview">
<img :src="selectedImage" alt="Preview">
</div>
<!-- 免责声明: -->
<div class="disclaimer" v-if="newsDetail.copyfrom == '本网'">
<p>原文链接：{{ newsDetail.fromurl }}</p>
<p>[免责声明]本文来源于网络转载，仅供学习交流使用，不构成商业目的。 版权归原作者所有，如涉及作品内容，版权和其他问题，请在30日与本网联系，我们将第一时间处理。</p>
</div>
<div v-if="articleChoice">
<HomeSurveyvote></HomeSurveyvote>
</div>
</div>
<div class="innerRight">
<!-- 热点资讯1 -->
<div class="hotList1">
<DetailHotNews></DetailHotNews>
</div>
<!-- 热点资讯2 -->
<div class="hotList2">
<DetailHotNews2></DetailHotNews2>
</div>
</div>
</div>
</div>
<!-- 页面底部 -->
<HomeFoot1></HomeFoot1>
</template>
<script setup>
//1.页面依赖 start ---------------------------------------->
import { onMounted } from 'vue'
import { ElBreadcrumb, ElBreadcrumbItem} from 'element-plus'
import { ArrowRight } from '@element-plus/icons-vue'
//1.页面依赖 end ---------------------------------------->
//2.页面路径 start ---------------------------------------->
const targetSegment = getRoutePath(1);
let routeId;
//通过导航路径反向查询导航id
const getRouteId = await requestDataPromise('/web/getWebsiteRoute', {
method: 'GET',
query: {
'pinyin': targetSegment,
},
});
if(getRouteId.code == 200){
routeId = getRouteId.data.category_id
}else{
console.log("错误位置：获得页面路径")
}
//2.页面路径 start ---------------------------------------->
//3.面包屑 start ---------------------------------------->
const route = useRoute();
const articleId = parseInt(route.params.id); //获得该页面的id
//3.1 获得父级栏目的名称、id
const parent_name = ref([]);
const parent_id = ref([]);
const parent_pinyin = ref("");
const parent_children_count = ref(0)
let getParentNav = async () => {
const listData = await requestDataPromise('/web/getOneWebsiteCategory', {
method: 'GET',
query: {
'catid': routeId
},
});
if (listData.code == 200) {
parent_name.value = listData.data.alias;
parent_id.value = listData.data.parent_id;
parent_pinyin.value = listData.data.aLIas_pinyin;
parent_children_count.value = listData.data.children_count;
} else {
console.log("错误位置：获取面包屑导航")
}
}
getParentNav();
//3.页面依赖 end ---------------------------------------->
//4.页面数据 start ---------------------------------------->
//4.1 资讯详情
const newsDetail = ref({})
const routeNewsTtitle = ref("");
//4.2 发布日期
const time = ref("");
//4.3 路径
const routLevelTitle = ref("");
const routLevelId = ref("");
//4.4 是否展示投票
const articleChoice = ref(false);
//4.5 获取详情
async function getPageData() {
const mkdata = await requestDataPromise('/web/selectWebsiteArticleInfo', {
method: 'GET',
query: {
'articleid': articleId
},
});
if(mkdata.code==200){
//判断是否显示投票
if(mkdata.data.is_survey==1){
console.log("本篇文章含有投票！")
articleChoice.value = true;
}
//获取内容
newsDetail.value = mkdata.data;
//获取路径
routLevelTitle.value = newsDetail.value.cat_name;
routLevelId.value = newsDetail.value.category_id;
//获取发布时间
time.value = newsDetail.value.updated_at.split(' ')[0];
//修正标题长度
if (newsDetail.value.title.length >= 20) {
routeNewsTtitle.value = newsDetail.value.title.substr(0, 20) + "...";
} else {
routeNewsTtitle.value = newsDetail.value.title
}
}else{
console.log("错误位置：获取详情内容")
}
}
getPageData();
//4.页面数据 end ---------------------------------------->
//5.广告 start ---------------------------------------->
let adImg1 = ref([]);
onMounted(async () => {
const { $webUrl, $CwebUrl } = useNuxtApp();
//广告1
let url = `${$webUrl}/web/getWebsiteAdvertisement?ad_tag=nmgw_detail_0001`
const responseAd1 = await fetch(url, {
headers: {
'Content-Type': 'application/json',
'Userurl': $CwebUrl,
'Origin': $CwebUrl
}
});
const resultAd1 = await responseAd1.json();
adImg1.value = resultAd1.data[0];
})
//5.广告 end ---------------------------------------->
//6.设置seo信息 start---------------------------------------->
const setData = await requestDataPromise('/web/selectWebsiteArticleInfo', {
method: 'GET',
query: {
'articleid': articleId
},
});
if(setData.code==200){
let seoTitle = setData.data.title;
let seoDescription = setData.data.introduce;
let seoKeywords = setData.data.keyword;
let seoSuffix = setData.data.suffix;
let seoName = setData.data.website_name;
useSeoMeta({
title: seoTitle + "_" + seoName + "_" + seoSuffix,
meta: [
{ name: 'description', content: seoDescription + "_" + seoName + "_" + seoSuffix , tagPriority: 10 },
{ name: 'keywords', content: seoKeywords + "_" + seoName + "_" + seoSuffix , tagPriority: 10 }
]
});
}else{
console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
console.log("错误位置：设置详情页面SEO数据")
console.log("后端错误反馈：",setData.message)
console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
}
//6.设置seo信息 end---------------------------------------->
//8.页面图片放大 start---------------------------------------->
const previewVisible = ref(false)
const selectedImage = ref(' ')
const openPreview = (event) => {
if (event.target.tagName === 'IMG') {
selectedImage.value = event.target.src;
previewVisible.value = true;
}
}
const closePreview = () => {
previewVisible.value = false;
}
//8.页面图片放大 end---------------------------------------->
</script>
<style lang="less" scoped>
@import url('@/assets/css/detail.less');
</style>